<template>
    <div class="loginContain">
        <div class="loginLeft">
            <div class="top">
                <img src="@/assets/login/ywu.png" class="topLogo">
                <span class="topSpan">
                    YWU 一站式应用管理
                </span>
            </div>
            <div class="bottom">
                <img src="@/assets/login/ywu.png" class="bottomImg"/>
            </div>
        </div>
        <div class="loginRight" v-if="loginFlag">
            <div class="top">
                <div class="title">
                    <span>
                        登录
                    </span>
                </div>
            </div>
            <div class="bottom">
                <div class="inputContain">
                    <div class="elInput">
                        <el-input v-model="userName" placeholder="输入用户名" :prefix-icon="User" input-style="font-size:15px;height:35px"/>
                    </div>
                    <div class="elInput">
                        <el-input v-model="password" type="password" show-password placeholder="输入密码" :prefix-icon="Lock" input-style="font-size:15px;height:35px"/>
                    </div>
                    <div class="elInput">
                        <el-input v-model="verifyCode" placeholder="输入验证码" :prefix-icon="CircleCheck" input-style="font-size:15px;height:35px"/>
                        <img class="verifyCodeImg" :src="url" @click="verifyCodeImageClick()">
                    </div>
                    <el-button type="primary" round :loading="loginLoading" class="loginButton" @click="loginUserCheck()">登录</el-button>
                </div>
                <div class="buttonContain">
                    <Divider class="dividerSpan">其他登录方式 - 暂未使用</Divider>
                    <div class="commonIcon">
                        <WechatOutlined style="font-size: 40px"/>
                        <QqOutlined class="iconInfo" style="font-size: 40px"/>
                        <GithubOutlined style="font-size: 40px"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="loginRight" v-if="!loginFlag">
            <div class="top">
                <div class="title">
                    <span>
                        登录租户
                    </span>
                </div>
            </div>
            <div class="bottom">
                <div class="tenantInputContain">
                    <el-button v-for="item in loginTenantList" :key="item.id" :loading="item.loading" type="primary" class="loginButton" round  @click="loginUser(item)">
                        {{ item.tenantNameCn }}</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { WechatOutlined, QqOutlined, GithubOutlined } from '@ant-design/icons-vue';
import { Divider } from 'ant-design-vue';
import { User, Lock, CircleCheck } from '@element-plus/icons-vue'
import {loginUser, loginUserCheck, loginVerifyCode} from '@/request/login'
export default {
    name: "Login",
    data() {
        return {
            userName: "",
            password: "",
            verifyCode: "",
            User: User,
            Lock: Lock,
            CircleCheck: CircleCheck,
            url: "",
            loginFlag: true,
            loginLoading: false,
            loginTenantList: [],
            loginCheckStr: ""
        }
    },
    components: {
        WechatOutlined,
        QqOutlined,
        GithubOutlined,
        Divider
    },
    methods: {
        verifyCodeImageClick() {
            loginVerifyCode().then(res => {
                this.url = res.data
            })
        },
        loginUserCheck() {
            this.loginLoading = true
            let userInfo = {
                userAccount: this.userName,
                userPassword: this.password,
                verifyCode: this.verifyCode
            }
            loginUserCheck(userInfo).then(res => {
                if (res.code === '200') {
                    // 校验登录成功，选择登录租户
                    this.loginLoading = false
                    this.loginCheckStr = res.data.loginCheckRandomStr
                    this.loginTenantList = res.data.tenantData
                    this.loginFlag = false
                }
            }).catch(res => {
                this.loginLoading = false
            })
        },
        loginUser(tenantItem) {
            tenantItem.loading = true
            let userInfo = {
                userAccount: this.userName,
                loginCheckRandomStr: this.loginCheckStr,
                tenantId: tenantItem.tenantId
            }
            loginUser(userInfo).then(res => {
                if (res.code === '200') {
                    // 登录成功
                    this.$router.push("/");
                }
            }).catch(res => {
            })
        }
    },
    created() {
        // 创建时生成验证码
        loginVerifyCode().then(res => {
            this.url = res.data
        })
    }
}
</script>

<style scoped lang="less">
    .loginContain {
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 25px;
        .loginLeft {
            float: left;
            width: 50%;
            height: 100%;
            .top {
                width: 100%;
                height: 20%;
                // 水平、垂直居中
                display: flex;
                justify-content: center;
                align-items: center;
                .topLogo {
                    width: 7%;
                }
                .topSpan {
                    font-size: 28px;
                    margin-left: 20px;
                    color: #037cde;
                    //去除光标
                    caret-color: transparent;
                }
            }
            .bottom {
                width: 100%;
                height: 80%;
                // 水平、垂直居中
                display: flex;
                justify-content: center;
                align-items: center;
                //去除光标
                caret-color: transparent;
                .bottomImg {
                    width: 55%;
                }
            }
        }
        .loginRight {
            float: right;
            width: 50%;
            height: 100%;
            .top {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 15%;
                .title {
                    span {
                        font-size: 22px;
                        color: #037cde;
                        //去除光标
                        caret-color: transparent;
                    }
                }
            }
            .bottom {
                width: 100%;
                height: 85%;
                .inputContain {
                    width: 95%;
                    height: 75%;
                    margin: 0 auto;
                    .elInput {
                        width: 100%;
                        height: 20%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .verifyCodeImg {
                            display: block;
                            width: 50%;
                            height: 53%;
                            //去除光标
                            caret-color: transparent;
                        }
                        .verifyCodeImg:hover {
                            cursor: pointer;
                        }
                    }
                    .loginButton {
                        width: 100%;
                        height: 10%;
                        margin-top: 8%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .buttonContain {
                    width: 100%;
                    height: 25%;
                    .dividerSpan {
                        margin: 0;
                        padding: 0;
                        //去除光标
                        caret-color: transparent;
                    }
                    .commonIcon {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 5%;
                        .iconInfo {
                            margin-left: 10%;
                            margin-right: 10%;
                        }
                    }
                }
                .tenantInputContain {
                    overflow: auto;
                    width: 95%;
                    height: 85%;
                    margin: 0 auto;
                    .loginButton {
                        width: 100%;
                        margin-left: 0px;
                        margin-bottom: 5%;
                    }
                }
            }
        }
    }
    /* 美化整个滚动条 */
    ::-webkit-scrollbar {
        width: 12px; /* 设置滚动条的宽度 */
        background-color: #f9f9f9; /* 滚动条的背景颜色 */
    }

    /* 美化滚动条轨道 */
    ::-webkit-scrollbar-track {
        background: #e1e1e1; /* 轨道的背景颜色 */
        border-radius: 10px; /* 轨道的圆角大小 */
    }

    /* 美化滚动条的滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #c1c1c1; /* 滑块的背景颜色 */
        border-radius: 10px; /* 滑块的圆角大小 */
        border: 2px solid #ffffff; /* 滑块边框 */
    }

    /* 当滑块悬停或活动时的样式 */
    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8; /* 悬停或活动状态下滑块的背景颜色 */
    }
</style>